<template>
	<view>
		<!-- 时间，状态 -->
		<view class="li_top tops hu le">
			<view class="top_left">
				<view class="bh" v-if="!itemData.is_other">
					<view>订单号:</view>
					<view class="in" v-for="(item,index) in itemData.orders">
						<text>{{item.order_id}}</text>
						<text v-if="itemData.orders.length-1!=index">,</text>
					</view>
				</view>
				<view class="bh" v-else>
					<view style="font-size: 26rpx;">第三方单号:</view>
					<view class="in">
						<text>{{itemData.other.order_id}}</text>
					</view>
				</view>
				<view class="qz" @click="weightClick(itemData.weight,itemData.id)">
					<view class="in" v-if="itemData.weight==-1"><text>无货</text></view>
					<view class="in" v-else><text>{{itemData.weight}}</text>级</view>
					<text class="two iconfont icon-xiangxia1" style="font-size: 24rpx;"></text>
				</view>
				<!-- <text class="fz" @click="copyCard(itemData.order_id)">复制</text> -->
			</view>
			<view class="top_right" v-if="useCustomer.tabCurrent==0">
				<text>距离:{{distance(itemData.map_distance)}}</text>
				<!-- <text v-if="itemData.maps_shijian">时间:{{durationFun(itemData.maps_shijian)}}</text> -->
				<!-- <text>时间:{{durationFun(13020)}}</text> -->
			</view>
			<view class="top_right" v-else-if="useCustomer.tabCurrent==1">
				已完成
			</view>
		</view>
		<view class="li_name" v-if="!itemData.is_other">
			<view class="imgess">
				<view class="li_imgs" @click="previewImageClick(itemData.logistic_face)" v-if="itemData.logistic_face">
					<u-image :src="itemData.logistic_face" :width="'150rpx'" height="150rpx" mode="scaleToFill" :lazy-load="true" :radius="6">
						<template v-slot:loading>
						    <u-loading-icon color="red"></u-loading-icon>
						  </template>
					</u-image>
					<!-- 关闭 -->
					<!-- <view class="colces">
						<text class="iconfont icon-cha"></text>
					</view> -->
					<!-- 关闭 -->
				</view>
				<view class="li_imgs" @click="previewImageClick(itemData.store_face)" v-else-if="itemData.store_face">
					<u-image :src="itemData.store_face" :width="'140rpx'" height="140rpx" mode="scaleToFill" :lazy-load="true" :radius="6">
						<template v-slot:loading>
						    <u-loading-icon color="red"></u-loading-icon>
						  </template>
					</u-image>
				</view>
				<view class="li_imgs" v-else @click="faceClick(itemData)">
				 <view class="imgs_nr">暂无图片</view>
				</view>
				<view class="mx" v-if="itemData.store_face || itemData.logistic_face" @click="faceClick(itemData)">修改门脸照</view>
				<view class="mx" v-else @click="faceClick(itemData)">上传门脸照</view>
			</view>
			<view class="li_top">
				<view class="top_left">
					<view class="mz">{{itemData.store_name}}</view>
					<view class="address" v-if="itemData.logistic_address">
						<u-radio-group v-model="itemData.logistic_address_models" activeColor="#1BBD60">
							<u-radio label="客户(客户定位)" :name="0" labelSize="12" size="16" style="margin-right: 20rpx;"></u-radio>
							<u-radio label="司机(司机定位)" :name="1" labelSize="12" size="16"></u-radio>
						</u-radio-group>
					</view>
					<view class="dzs" v-if="itemData.logistic_address_models==0">{{itemData.address}}</view>
					<view class="dzs" v-if="itemData.logistic_address_models==1">
						<text>{{itemData.logistic_address}}</text>
						<text class="in" @click="locationDelClick(itemData.id)">删除</text>
					</view>
				</view>
			</view>
		</view>
		<view class="li_name other" v-else>
			<view class="li_top">
				<view class="top_left">
					<view class="mz">{{itemData.consignee}}</view>
					<view class="address" v-if="itemData.logistic_address">
						<u-radio-group v-model="itemData.logistic_address_models" activeColor="#1BBD60">
							<u-radio label="客户(客户定位)" :name="0" labelSize="12" size="16" style="margin-right: 20rpx;"></u-radio>
							<u-radio label="司机(司机定位)" :name="1" labelSize="12" size="16"></u-radio>
						</u-radio-group>
					</view>
					<view class="dzs" v-if="itemData.logistic_address_models==0">{{itemData.address}}</view>
					<view class="dzs" v-if="itemData.logistic_address_models==1">
						<text>{{itemData.logistic_address}}</text>
						<text class="in" @click="locationDelClick(itemData.id)">删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<view class="li_top hu"></view>
		<view class="li_name" v-if="!itemData.is_other">
			<view class="li_rgt">
				<!-- <text v-if="!itemData.store_face" @click="faceClick(itemData)">上传门脸照</text>
				<text v-else @click="faceClick(itemData)">修改门脸照</text> -->
				<text @click="locationClick(itemData)">司机精准定位</text>
			</view>
			<view class="li_rigs" @click="phoneCalls(itemData.mobile)">
				<view class="rige_top">
					<view class="names">{{itemData.consignee}}</view>
					<view class="ins">{{itemData.mobile}}</view>
				</view>
				<text class="iconfont icon-24gf-telephone"></text>
			</view>
		</view>
		
		<view class="li_name" v-else>
			<view class="li_rgt">
				第三方单
			</view>
			<view class="li_rigs" @click="phoneCalls(itemData.mobile)">
				<view class="rige_top">
					<view class="names">第三方单</view>
					<view class="ins">{{itemData.mobile}}</view>
				</view>
				<text class="iconfont icon-24gf-telephone"></text>
			</view>
		</view>
		
		<view class="li_top hu dashed"></view>
		<view v-if="type==1"> 
			<orderListGoods :itemData="itemData"></orderListGoods>
		</view>
		<view v-if="type==2" class="cont_one">
			<scroll-view scroll-y :style="'max-height:300rpx'">
				<orderListGoods :itemData="itemData"></orderListGoods>
			</scroll-view>
		</view>
		<view class="li_top hu dashed"></view>
		<view  v-if="!itemData.is_other">
			<view class="li_top ly lys" v-for="(its,ids) in itemData.postscriptListData" :key="ids">
				<view class="top_left">
					<view class="lefts">
						<text v-if="its.order_id">{{its.order_id}}-</text>
						<text>客户留言：</text>
					</view>
					<view class="hes">{{its.postscript}}</view>
				</view>
			</view>
		</view>
		<view  v-else-if="itemData.other.postscript">
			<view class="li_top ly lys">
				<view class="top_left">
					<view class="lefts">
						<text>客户留言：</text>
					</view>
					<view class="hes">{{itemData.other.postscript}}</view>
				</view>
			</view>
		</view>
		<view class="li_top ly" v-if="!itemData.is_other">
			<view class="top_left">
				<view class="lefts">司机留言：</view>
				<view class="rights">
					<text class="hes">{{itemData.remark}}</text>
					<text class="hesr" v-if="itemData.remark" @click="remarkClick(itemData)">修改留言</text>
					<text class="hesr" v-else @click="remarkClick(itemData)">新增留言</text>
				</view>
			</view>
		</view>
		
		<!-- 送货图片上传 end-->
		<view v-if="useCustomer.tabCurrent==1">
			<view class="phones_top">
				<view class="phones_title">送货图片展示</view>
				<view class="phones_time">送达时间:{{itemData.end_time}}</view>
			</view>
			<confirmPopupPhoto :itemData="itemData"></confirmPopupPhoto>
		</view>
		
		<!-- 等级弹出框 -->
		<u-picker :show="gradepicker" :columns="columnsNum" :title="'越大优先级越高 无货-9级'" :defaultIndex="gradeIndex" @cancel="gradepicker=false" closeOnClickOverlay
			@confirm="gradeConfirm"
			@close="gradepicker=false"></u-picker>
		<!-- 等级弹出框 -->
		
	</view>
</template>

<script setup>
	import { ref } from "vue"
	import orderListGoods from "./orderListGoods.vue";//订单goods
	import confirmPopupPhoto from "./confirmPopupPhoto.vue";//上传图片
	
	//请求接口
	import {
		postOrderStoreLocation,postOrderStoreLocationDel,postOrderLogisticWeight
	} from "@/service/pagesA/customer.js"
	
	const props = defineProps({
		itemData:Object,
		type:Number,//1是列表首页 2是弹窗
	})
	
	//引入用户相关的小仓库
	import useCustomerStore from '@/store/customer.js'
	const useCustomer = useCustomerStore()
	
	//等级
	const gradepicker=ref(false);
	const columnsNum=ref([['无货','1级', '2级', '3级', '4级', '5级', '6级', '7级', '8级', '9级']]);
	const gradeIndex=ref([0]);
	const gradeId=ref(0);
	
	
	//门店定位删除
	async function postOrderStoreLocationDelFun(logistic_id){
		await postOrderStoreLocationDel({
			logistic_id
		})
		.then((res)=>{
			let nums=useCustomer.listData.findIndex((value) => value.id == logistic_id);
			useCustomer.listData[nums].logistic_address_models=0;
			useCustomer.listData[nums].logistic_address=null;
			useCustomer.listData[nums].logistic_lat=null;
			useCustomer.listData[nums].logistic_lng=null;
			uni.showToast({title: '删除成功!',icon:'none',duration:1000});
		})
		.finally(()=>{
			useCustomer.loadingTrue=false;
		})
	}
	
	//修改权重
	async function postOrderLogisticWeightFun(arrs){
		await postOrderLogisticWeight(arrs)
		.then((res)=>{
			planningClicks();//重新规划
			uni.showToast({title: '修改成功!',icon:'none',duration:1000});
		})
		.finally(()=>{
			gradepicker.value=false;
			useCustomer.loadingTrue=false;
		})
	}
	

	//上传门脸照
	function faceClick(item){
		useCustomer.imgFun(item.id,1);
	}
	
	//司机定位上传
	function locationClick(item){
		useCustomer.locationAddres=item;
		useCustomer.modalShow=true;
	}
	
	//司机定位删除
	function locationDelClick(id){
		useCustomer.loadingTrue=true;
		postOrderStoreLocationDelFun(id);
	}
	
	//修改和上传备注
	function remarkClick(item){
		useCustomer.scriptContent=item.remark;
		useCustomer.scriptShowId=item.id;
		useCustomer.scriptShow=true;
	}
	
	//转换
	const distance=(m)=>{
			if (m >= 1000) {
			  return (m / 1000).toFixed(2) + 'km'
			} else {
				return m + 'm'
			}
	}
	
	//时间转换
	const durationFun2=(time_s)=>{
			var minute = Math.floor(time_s/60);
			var rest_seconds = time_s%60;
			console.log(minute + "分" + rest_seconds + "秒")
			return minute + "分" + rest_seconds + "秒 "
	}
	
	
	const durationFun=(value)=>{
		var theTime = parseInt(value);// 需要转换的时间秒 
		 var theTime1 = 0;// 分 
		 var theTime2 = 0;// 小时 
		 var theTime3 = 0;// 天
		 if(theTime > 60) { 
		  theTime1 = parseInt(theTime/60); 
		  theTime = parseInt(theTime%60); 
		  if(theTime1 > 60) { 
		   theTime2 = parseInt(theTime1/60); 
		   theTime1 = parseInt(theTime1%60); 
		   if(theTime2 > 24){
		    //大于24小时
		    theTime3 = parseInt(theTime2/24);
		    theTime2 = parseInt(theTime2%24);
		   }
		  } 
		 } 
		 var result = '';
		 // if(theTime > 0){
		 //  result = ""+parseInt(theTime)+"秒";
		 // }
		 if(theTime1 > 0) { 
		  result = ""+parseInt(theTime1)+"分"+result; 
		 } 
		 if(theTime2 > 0) { 
		  result = ""+parseInt(theTime2)+"小时"+result; 
		 } 
		 if(theTime3 > 0) { 
		  result = ""+parseInt(theTime3)+"天"+result; 
		 }
		 return result; 
	}
	
	//预览图片
	function previewImageClick(img){
		uni.previewImage({
			urls: [img]
		})
	}
	
	//复制
	function copyCard(code){
		uni.setClipboardData({ data: code+'' });
	}
	
	//热线拨号
	function phoneCalls(tel) {
		// #ifdef APP-PLUS
		plus.device.dial(tel, true);
		//#endif
		// #ifdef H5
	  uni.makePhoneCall({
	    phoneNumber: tel,
	    success: function () {},
	    fail: function () {}
	  })
		//#endif
	}
	
	//级别重置
	function weightClick(num,id){
		if(num==-1)num=0;
		gradeIndex.value=[parseInt(num)]; //默认等级赋值
		gradepicker.value=true;
		gradeId.value=id;
	}
	
	//等级点击切换
	function gradeConfirm(e){
		let nums=e.indexs[0];
		if(nums==0)nums=-1;
		
		useCustomer.loadingTrue=true;
		postOrderLogisticWeightFun({
			logistic_id:gradeId.value,
			weight:nums
		});
		
	}
	
	//重新规划路线
	function planningClicks(){
		useCustomer.tabsList=[{name: '配送中'},{name: '已完成'}];
		useCustomer.loadingType = 0;
		useCustomer.addressFun();
	}
	
</script>

<style lang="scss" scoped>
.li_top{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 40rpx;
	// align-items: center;
	position: relative;
	.top_left{
		font-size:26rpx;
		color: #666;
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: auto;
		.fz{
			border: 2rpx solid #ccc;
			border-radius: 60rpx;
			padding: 4rpx 20rpx;
			font-size: 24rpx;
			color: #999;
			margin-left: 20rpx;
			line-height: initial;
			height: 40rpx;
			display: flex;
			align-items: center;
			justify-items: center;
			flex: none;
			width: 50rpx;
		}
		.dz{
			flex: auto;
		}
		.wz{
			flex: none;
			width: 110rpx;
			text-decoration: underline;
			color: #FD7722;
			margin-left: 10rpx;
			text-align: center;
		}
	}
	.top_right{
		font-size: 30rpx;
		color: #FD7722;
		display: flex;
		flex: none;
		margin-left: 14rpx;
		.on{
			font-size: 24rpx;
			color: #666;
			width: 120rpx;
		}
		.sn{
			color: #000;
			font-size: 24rpx;
			font-weight: 700;
			text-align: right;
			width: 140rpx;
		}
	}
}
.li_top.le::after {
	content: '';
	display: block;
	width: 8rpx;
	height: 40rpx;
	background-color: #FF3D5A;
	border-radius: 8rpx;
	position: absolute;
	top: 10rpx;
	left: -20rpx;
}
.li_top.hu{
	line-height: 60rpx;
	border-bottom: 2rpx solid #F7F7F7;
	padding-bottom: 10rpx;
	margin-bottom: 20rpx;
}
.li_top.hu.dashed{
	border-bottom:2rpx dashed #ccc;
}
.li_top.dx{
	border-bottom: 2rpx solid #F7F7F7;
	padding-bottom: 20rpx;
	margin-bottom: 20rpx;
}
.li_top.tops{
	.top_left{
		color: #000;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.bh{
			font-size:28rpx;
			font-weight: 500;
			display: flex;
			flex-direction: row;
			.in{
				font-size:30rpx;
				font-weight: 700;
				color: red;
			}
		}
		.qz{
			display: flex;
			flex-direction: row;
			align-items: center;
			.in{
				color: #000;
				font-size: 28rpx;
				
				text{
					color: red;
					font-size: 28rpx;
					margin: 0 4rpx;
					font-weight: 700;
				}
			}
		}
	}
}
.li_top.ly{
	// border: 2rpx solid #eee;
	padding: 10rpx;
	.top_left{
		color: #999;
		font-size: 26rpx;
		.lefts{
			flex: none;
			width: 140rpx;
			margin-right: 4rpx;
		}
		.rights{
			flex: auto;
		}
		.hes{
			color: #333;
			font-size: 24rpx;
			font-weight: 700;
			flex: auto;
		}
		.hesr{
			color: red;
			font-size: 24rpx;
			font-weight: 700;
			margin-left: 10rpx;
			text-decoration: underline;
		}
	}	
}
.li_top.ly.lys{

	.top_left{
		color: #666;
		font-size: 26rpx;
		.lefts{
			width: auto;
		}
		.hes{
			color: #333;
			font-size: 28rpx;
			font-weight: 700;
		}
	}	
}
.li_top.ly:last-child{
	// margin-top: -2rpx;
}
.li_name{
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	.li_rgt{
	  display: flex;
	  flex: auto;
		padding: 30rpx 0;
		justify-content: space-around;
		text{
			font-size: 28rpx;
			color: #1EBE63;
			text-decoration: underline;
		}
	}
	.imgess{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-right: 30rpx;
		flex: none;
		.mx{
			font-size: 26rpx;
			color: #1EBE63;
			text-decoration: underline;
			margin-top: 10rpx;
		}
	}
	.li_imgs{
		width: 140rpx;
		height: 140rpx;
		flex: none;
		position: relative;
		.imgs_nr{
			background: #eee;
			height: 140rpx;
			height: 140rpx;
			border-radius: 12rpx;
			color: #999;
			font-size: 20rpx;
			display:flex;
			align-items: center;
			justify-content: center;		
		}
		.colces{
			position: absolute;
			right: 0;
			top: 0;
			width: 30rpx;
			height: 30rpx;
			.iconfont{
				font-size: 28rpx;
				color: #fff;
			}
		}
	}
	.li_top{
		flex: 1;
		.top_left{
			display: flex;
			flex-direction: column;
			align-items: baseline;
			.mz{
				font-size: 32rpx;
				color: #000;
				font-weight: 700;
			}
			.dzs{
				font-size: 24rpx;
				color: #999;
				margin-top: 10rpx;
				.in{
					font-size: 24rpx;
					color: red;
					margin-left: 10rpx;
					text-decoration: underline;
				}
			}
			.address{
				margin-top: 10rpx;
			}
		}
	}
	.li_rigs{
		display: flex;
		flex-direction:row;
		align-items: center;
		padding: 0 0rpx;
		position: relative;
		min-width: 300rpx;
		justify-content: center;
		margin-left: 20rpx;
		transition: 0.3s all;
		.rige_top{
			display: flex;
			flex-direction: column;
		}
		.names{
			font-size: 26rpx;
			color: #000;
			font-weight: 700;
			margin-right: 10rpx;
			margin-bottom: 10rpx;
		}
		.ins{
			font-size: 22rpx;
			color: #666;
			font-weight: 700;
			overflow: hidden;//溢出隐藏
			white-space: nowrap;//禁止换行
			text-overflow: ellipsis;//...

		}
		.iconfont{
			font-size: 38rpx;
			width: 38rpx;
			height: 38rpx;
			color: #1CBE61;
			margin-left: 20rpx;
		}
	}
	.li_rigs::after {
		content: '';
		display: block;
		width: 2rpx;
		height: 60rpx;
		background-color: #eee;
		position: absolute;
		top: 50%;
		margin-top: -30rpx;
		left: 0rpx;
	}
	.li_rigs:active{
		background: #eee;
	}
}
.li_name.other{
	.dzs{
		margin-bottom: 10rpx;
		font-weight: 500;
	}
}
.phones_top{
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	.phones_time{
		font-size: 28rpx;
		color: red;
		font-weight: 700;
	}
	.phones_title{
		padding: 20rpx 0;
		color: #333;
		font-size: 30rpx;
		font-weight: 700;
	}
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.cont_one :deep(::-webkit-scrollbar){
	width: 8rpx!important;
	height: 8rpx!important;
	background-color: #cccccc;
	display:inline-block;
}    /*定义滚动条轨道 内阴影+圆角*/
.cont_one :deep(::-webkit-scrollbar-track)
{
	// -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	border-radius: 6px;
	background: #f9f9f9;
}    /*定义滑块 内阴影+圆角*/
    
.cont_one :deep(::-webkit-scrollbar-thumb){
	border-radius: 6px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
	background-color: #ccc;
}


</style>
